<template>
	<view class="config">
		<!-- 头部 -->
		<view class="header">
			<view class="header-title hideText1">{{ obj.modelName }}</view>
			<view class="header-text">
				<text v-if="obj.carRegistrationTime">{{ obj.carRegistrationTime | changeDates(0,7) }}上牌</text>
				<text>{{ obj.mileage }}万公里</text>
			</view>
		</view>
		<!-- 配置列表 -->
		<view class="config-list">
			<view class="model" v-for="(item,index) in infoList" :key="index">
				<view class="model-top">
					<view class="model-top-title">{{ item.confignName }}</view>
					<view class="model-top-r">
						<view class="model-top-r-t"><text>●</text> 标配</view>
						<view class="model-top-r-t"><text>○</text> 选配</view>
						<view class="model-top-r-t"><text>-</text> 无</view>
					</view>
				</view>
				<view class="model-list" v-if="item.confignData!= undefined && item.confignData.length>0">
					<view class="model-list-li" v-for="(i,index1) in item.confignData" :key="index1">
						<view class="model-list-li-item model-list-l">{{ i[0] }}</view>
						<view class="model-list-li-item model-list-r">
							<u-parse :content="i[1] || '-' "></u-parse>
						</view>
					</view>
				</view>
				<view class="model-list-null" v-else>
					<null></null>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import API from "@/api/carInfo.js"
	import uParse from '@/components/u-parse/u-parse.vue'
	export default {
		components: {
			uParse
		},
		data() {
			return {
				obj: null,
				infoList:[],
			}
		},
		onLoad(option) {
			
			this.obj = JSON.parse(decodeURIComponent(option.item));
			
			this.getConfigurationInfo(this.obj.modelId)
		},
		methods: {
			getConfigurationInfo(modelId){
				let data = {modelId:modelId}
				API.getConfigurationInfo(data).then(res=>{
					console.log(res)
					if(res.code == 200){
						this.infoList = res.data
					}else{
						this.$u.toast(res.message || '请求失败');
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url("@/components/u-parse/u-parse.css");
	.config{
		background-color: #f8f8f8;
		padding-bottom: 40rpx;
		box-sizing: border-box;
		.header{
			padding: 24rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-top: 2rpx solid #f8f8f8;
			.header-title{
				font-size: 28rpx;
				color: #333;
			}
			.header-text{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: #999;
				margin-top: 20rpx;
			}
		}
		.config-list{
			margin-top: 24rpx;
			.model{
				background-color: #fff;
				.model-top{
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #333;
					padding: 24rpx;
					box-sizing: border-box;
					.model-top-title{
						flex: 1;
						font-size: 32rpx;
						font-weight: bolder;
					}
					.model-top-r{
						display: flex;
						align-items: center;
						.model-top-r-t{
							font-size: 28rpx;
							text{
								font-size: 36rpx;
								margin-right: 10rpx;
								margin-left: 30rpx;
							}
						}
					}
				}
				.model-list-null{
					border-top: 2rpx solid #cdcdcd;
					border-bottom: 2rpx solid #cdcdcd;
				}
				.model-list{
					border-bottom: 2rpx solid #cdcdcd;
					.model-list-li{
						display: flex;
						justify-content: space-between;
						align-items: stretch;
						font-size: 28rpx;
						color: #333;
						text-align: left;
						.model-list-li-item{
							width: 50%;
							padding: 24rpx;
							box-sizing: border-box;
							border-top: 2rpx solid #cdcdcd;
							table-layout:fixed; 
							word-break:break-all; 
							overflow:hidden;
							display: flex;
							align-items: center;
						}
						.model-list-l{
							border-right: 2rpx solid #cdcdcd;
						}
						.model-list-r{
							border-right: 0rpx solid #cdcdcd;
						}
					}
				}
			}
		}
	}
</style>
